/**
 * 
 * 今日学习
 * */
import React, { useEffect, useCallback, useState, useMemo } from 'react';

import { Calendar, Button, Icon } from 'antd-mobile';
import { getTodayLearning, getSignAll, postStudyRecord } from '@/network/protocol';
import moment from "moment";
import { Link } from "react-router-dom";
import { formatTime } from '@/util/util'

// import enUS from 'antd-mobile/lib/calendar/locale/en_US';
// import zhCN from 'antd-mobile/lib/calendar/locale/zh_CN';
import './style.less'



// extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7)] = { info: 'Disable', disable: true };
// extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() + 8)] = { info: 'aaa', disable: true, cellCls: 'signed' };
// moment().month(moment().month() + 1).startOf('month')

const TodayStudy = (props) => {

  const [data, setData] = useState({})

  const [date, setDate] = useState(moment().month()) //当前月份

  const [extra, setExtra] = useState({
    // [moment().startOf('month').valueOf()]: { info: '未签到', disable: true },
    // [moment().startOf('day').valueOf()]: { info: '今日', disable: false, cellCls: 'signedT' },
    // [moment().subtract(1, 'days').startOf('day').valueOf()]: { info: '已签到', disable: false, cellCls: 'signed' },
    // [moment().subtract(2, 'days').startOf('day').valueOf()]: { info: '已签到', disable: false, cellCls: 'signed' },
  })


  const date1 = useMemo(() => { // 获取的对应月份的月首的时间
    let times = moment().month(date).startOf('month').valueOf()
    return new Date(times)
  }, [date])

  const getToday = useCallback(async () => {
    // 1 => 医学知识
    // 0 => 产品知识
    let response = await getTodayLearning();
    if (response.errorCode === 0) {
      let data1 = response.source;
      setData(data1)
    }
  }, [])

  const getSign = useCallback(async () => {
    // console.log(moment().day(7).format())
    let params = { yearMonth: moment().format('YYYY-MM') }
    let data = await getSignAll(params);
    if (data.errorCode === 0) {
      let obj = {};
      let signList = data.source.map(item => {
        // console.log(moment().startOf('day').valueOf())
        obj[moment(item.createTime).valueOf()] = { info: '已签到', disable: false, cellCls: 'signed' }
        return moment(item.createTime).date()
      }) // 哪几号签到了
      let unsignList = [];
      let today = moment().date(); //今天几号

      for (let i = 1; i < today; i++) { // 那几号没签到
        if (signList.indexOf(i) === -1) {
          unsignList.push(i)
        }
      }

      unsignList.map(item => {
        obj[moment().date(item).startOf('day').valueOf()] = { info: '未签到', disable: true }
      })

      obj[moment().startOf('day').valueOf()] = { info: '今日', disable: false, cellCls: 'signedT' };

      setExtra({ ...obj })
    }


  }, [])


  const addDate1 = useCallback(() => {
    let t = date;
    t++;
    setDate(t)
  }, [date])

  const reduceDate1 = useCallback(() => {
    let t = date;
    t--
    setDate(t)
  }, [date])


  const getDateExtra = useCallback((date) => {
    return extra[+date]
  }, [extra]);


  const setLearn = useCallback(async (data) => {
    let para = {
      id: data.id,
      learningType: data.type,
    }
    let data2 = await postStudyRecord(para) //点击之后 置为学习进度
  }, [])


  //   0 产品
  // 1 医学

  useEffect(() => {
    getToday();
    getSign();
  }, [getSign, getToday])


  return (
    <div className="TodayStudy-content">
      <div className="today-item">
        {
          data.id === 0 ?
          
            <p className="todaynodata">暂无每日一学</p>
            :
            <>
              <div className="today-item-t">
                <div className="today-item-t-img">
                  <img src={data.listImgUrl} alt=""/>
                </div>
                <div className="today-item-t-text">
                  <p className={'today-item-t-title'}>{data.title}</p>
                  <p className="today-item-t-shortDesc">{data.shortDesc}</p>
                </div>
              </div>
              <div className="today-item-b">
                <p>发布于：{formatTime(data.pubTime)}</p>
                <Button type="primary" size="small" onClick={() => setLearn(data)}>
                  <Link to={data.type === 0 ? '/proDetail?id=' + data.id : '/medicalDetail?id=' + data.id}>开始学习</Link>
                </Button>
              </div>
            </>
        }

      </div>
      {/* <div className="date-option">
        <Icon type="left" size='lg' onClick={reduceDate1} />
        <Icon type="right" size='lg' onClick={addDate1} />
      </div> */}
      <div className="sign-box" key={Date.now()}>
        <Calendar
          visible={true}
          getDateExtra={getDateExtra}
          defaultDate={date1}
          renderShortcut={() => null}
          showShortcut
          renderHeader={() => null}
          minDate={date1}
          rowSize="normal"
          // maxDate={new Date(date + 31536000000)}
          type="one"
          initalMonths={1}
        />
      </div>

    </div>
  )
}


export default TodayStudy 